<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="circle_style.css" />
</head>
<body>
<div id="content" style="margin-top:3%;width: 90%; position: relative; margin-left: 5%;height: 100px;border: 3px; border-radius: 10px;background-color: white">
    <input type="text" id="tagTitle" placeholder="请输入标题" style="color: grey;width: 90%;height: 50px;margin-left: 5%">
    <input type="text" placeholder="请输入正文" style="color: grey;width: 90%; height: 50px;margin-left: 5%">
</div>
    <div style="margin-left: 5%;margin-top: 3%;">
        <p>已有“摄影”圈子，不可重复创建</p>
    </div>
    <div style="border-radius:10px;height:70px;float: left;margin-top:3%;width: 90%;margin-left: 5%;background-color: white">
        <div id="imgDiv" style="margin-top: 20px">
        <h3 style="float: left;margin-top: 5px;">选择圈子头像</h3>
        <span class="aui-iconfont aui-icon-right" style="color: #000000;margin-top:5px;font-weight: bolder;float: right"></span>
        <img  src="./image/demo1.png"  id="circle_avatar" tapmode onclick="selectAvatar()"style="height:40px;width:40px;float: right;border-radius: 50%;">
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript">

    apiready = function(){
        api.parseTapmode();
    };

    function circleApplyCreate() {
        json = {
            "user_id" : "llx",
            'tag_id'  :"2",
            'group_description':"Test"

        };
        $.ajax({
            url:'http://1.82.238.228:80/api/group/applyForCreateGroup/',
            data:JSON.stringify(json),
            method:'post',
            // crossDomain: true,
            dataType: 'json',
            async: true,
            success:function (ret) {
                alert(JSON.stringify(ret))
            }
        })
    }
    function selectAvatar() {
        api.getPicture({
            sourceType:'album',
            encodingType:'jpg',
            mediaValue:'pic',
            destinationType:'url',
            allowEdit:true,
            quality:40,
            targetWidth:40,
            targetHeight:40,
            saveToPhotoAlbum:false
        },function (ret,err) {
            if(ret){
               document.getElementById('imgDiv').removeChild(document.getElementById('circle_avatar'));
               document.getElementById('imgDiv').innerHTML = document.getElementById('imgDiv').innerHTML+
                       "<img src="+ JSON.stringify(ret.data) + "id = \"circle_avatar\" tapmode " +
                   "onclick=\"selectAvatar()\" style=\"height:40px;width:40px;float: right;border-radius: 50%;\" />"
                 ;

    }
            else {
                alert(JSON.stringify(err))
            }
        })
    }
    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>